<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程内部上方</title>
    <link rel="stylesheet" href="index.css">

</head>
<body>

<div class="nav-bar">
    <div class="content bx">
        <div class="top">
            <div class="left">
                <h1>
                    <a href="#">
                        联通学院
                    </a>
                </h1>
            </div>
            <div class="center">
                <form action="">
                    <div class="search-bar">
                        <div class="category">
                            <label>
                                <select name="category">
                                    <option value="all">全部</option>
                                    <option value="teacher">动态</option>
                                    <option value="course">讲师</option>
                                    <option value="article">课程</option>
                                </select>
                            </label>

                        </div>
                        <div class="keyword">
                            <label>
                                <input name="kw" type="text" placeholder="请输入搜索的关键字">
                            </label>
                        </div>
                        <div class="search-btn">
                            <input type="submit" value="&#xe604; 搜索" class="iconfont">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <ul class="menu-bar">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">信息中心</a></li>
                    <li><a href="#">教师中心</a></li>
                    <li><a href="#">课程专栏</a></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li class="iconfont icon-xiaochengxu">
                        微信小程序
                        <div class="detail-pane">
                            <p class="title">微信小程序</p>
                            <p class="intro">- 小程序, 真是好呀! -</p>
                            <img class="qr_code" src="../../components/image/ewm_lk.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="course-introduction">
    <div class="content bx">
        <div class="left">
            <img src="../../components/image/沃学民法典%20前言上.png">
        </div>
        <div class="right">
            <div class="top">
                <ul class="details">
                    <li class="one">前言(上)</li>
                    <li class="two">前言(上)</li>
                    <li class="three">播放终端： 不支持在线学习</li>
                    <li class="three">浏览器要求： 不限制浏览器</li>
                    <li class="three">课程时长： 0分钟</li>
                </ul>
            </div>
            <div class="bottom">
                <div class="left">开始学习</div>
                <div class="right">
                    <span class="iconfont icon-renshu">10</span>
                    <span class="iconfont icon-dianzan">20</span>
                    <span class="iconfont icon-xingxing">30</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="box">
    <div class="content bx">
        <div class="left">
            <div class="top1">
                <div class="title1">
                    <span>课程大纲</span>
                </div>
                <div class="video">视频:前言(上).mp4</div>
            </div>
            <div class="center1">
                <div class="title2">
                    <span>课程考试</span></div>
            </div>
            <div class="bottom1">
                <div class="title3">
                    <span>讨论</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="top2">
                <span>学习状态:已学习</span>
                <p>课程学习进度分别和课程章节进度、章节数量有关。</p>
            </div>
            <div class="center2">讲师</div>
            <div class="bottom2">参加学员</div>
        </div>
    </div>
</div>

<div class="subscript">
    <div class="content bx">
        <div class="item">
            <img class="logo" src="http://wsxy.chinaunicom.cn/learner/assets/learner/unicomlogo.png" alt="">
        </div>
        <div class="item">
            <div class="title" >客服电话：15611085701</div>
            <div class="subtitle" >服务时间：法定工作日，8：00-18：30</div>
        </div>
        <div class="item">
            <img onclick="show()" class="ewm" src="http://wsxy.chinaunicom.cn/content/upload/2020/07/10/a43329d6-1d84-4533-bfbd-5b333b21db31.png" alt="中国联通微学堂">
            <p>中国联通微学堂</p>
        </div>
    </div>
    <div class="mask">
        <div class="pane">
            <img src="http://wsxy.chinaunicom.cn/content/upload/2020/07/10/a43329d6-1d84-4533-bfbd-5b333b21db31.png" alt="">
            <span onclick="hide()" class="close">x</span>
        </div>
    </div>
</div>
<script>

    let lbt = document.getElementsByClassName("bg")[0];


    // 1. 获取所有的标题 li; 监听鼠标放到这个li时机
    let current = 0;
    let titleLis = document.querySelectorAll(".title-pane>li");
    let imageLis = document.querySelectorAll(".image-pane>li");
    for (let i = 0, len = titleLis.length; i < len; i++) {
        let titleLi = titleLis[i];
        titleLi.onmouseover = function () {
            // console.log("当前鼠标放到了li", i)

            // 1.0 清空上一个元素  class
            titleLis[current].className = ""
            imageLis[current].className = ""

            // 1.1 给当前这个需要对应的标题li 添加一个active类名
            titleLis[i].className = "active"

            // 1.2 给同样序号的 图片 li, 添加一个active类名
            imageLis[i].className = "active"


            current = i;
            lbt.style.backgroundImage = `url(${imageLis[i].getElementsByTagName("img")[0].src})`;

        }
    }


</script>

<script>

    function show() {
        let mask = document.getElementsByClassName("mask")[0]
        mask.classList.add("show")
    }
    function hide() {
        let mask = document.getElementsByClassName("mask")[0]
        mask.classList.remove("show")
    }


</script>

</body>
</html>